<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>豆瓣</title>

	<!-- 找head里Link有标签图标 -->
	<link rel="shortcut icon" type="img/x-icon" href="favicon.ico">
		
	<!-- 分次导入 -->
	<!-- <link rel="stylesheet" href="css/reset.css">
	<link rel="stylesheet" href="css/common.css"> -->
	<link rel="stylesheet" href="./css/index.css">
</head>

<body>
	<i class="iconfont "></i>
	<div class="header ">
		<div class="container clearfix ">

			<div class="logo left ">
				<h1>
					<a href="https://www.douban.com/">
						<!-- <span>豆瓣</span> -->
						豆瓣
						<span>douban</span>
					</a>
				</h1>
			</div>

			<div class="search left ">
				<form>
					<input type="text" class="txt" placeholder="电影、书籍、">
					<button>
						<i class="iconfont icon-sousuo"></i>
					</button>
				</form>
			</div>

			<nav class="menu right ">
				<a class="menu-read" href=""></a>
				<a class="menu-movie" href=""></a>
				<a class="menu-music" href=""></a>
				<a class="menu-city" href=""></a>
				<a class="menu-group" href=""></a>
				<a class="menu-fm" href=""></a>
				<a class="menu-time" href=""></a>
				<a class="menu-doupin" href=""></a>
			</nav>
		</div>
	</div>

	<!-- 横幅区域 -->
	<div class="banner ">
		<div class="contianer clearfix">
			<iframe class="right loginitem" src="./loginframe.html" frameborder="0"></iframe>
			<div class="slogan right">
				<div class="title">
					豆瓣
					<span>6.0</span>
				</div>
				<div class="download">
					<button class="btn">下载豆瓣</button>

					<div class="qr-code">
						<img class="qr-icon" src="./img/qr-icon.png" alt="">
						<div class="qrcode-img hidden">
							<img class="qrcode" src="./img/qrcode.png" alt="">
							<p>iOS / Android 扫码直接下载</p>
						</div>
					</div>



				</div>
			</div>
		</div>
	</div>

	<!-- 主区域样式 -->
	<div>
		<!-- 热点 -->
		<div class="section">
			<div class="container clearfix">

				<!-- 左侧边栏 -->
				<div class="aside-left hot-point">
					<div class="section-title">
						<h3 class="title">热点内容</h3>
						(
						<a href="" class="talk-square link">更多</a>
						)
					</div>

					<ul>
						<li>
							<div>
								<a href="">
									<img src="./img/NooBox/p2628845816.webp" alt="">
								</a>
								<a href="" class="note">The Lost Marriage </a>
								<span>17张照片</span>
							</div>
						</li>
						<li>
							<div>
								<a href="">
									<img src="./img/NooBox/p2635061707.webp" alt="">
								</a>
								<a href="" class="note"> 幻想出租屋。 </a>
								<span>143张照片</span>
							</div>
						</li>
						<li>
							<div>
								<a href="">
									<img src="./img/NooBox/p2636478663.webp" alt="">
								</a>
								<a href="" class="note"> 不能进入历史的历史  </a>
								<span>14张照片</span>
							</div>
						</li>
						<li>
							<div>
								<a href="">
									<img src="./img/NooBox/p2645156498.webp" alt="">
								</a>
								<a href="" class="note">寻找 </a>
								<span>13张照片</span>
							</div>
						</li>
					</ul>
				</div>

				<!-- 右侧边栏 -->
				<div class="aside-right hot-pointright">
					<!-- 广告 -->
					<div class="adv">
						<a href="">
							<img src="./img/NooBox/12.png" alt="">
						</a>

					</div>

					<!-- 列表标题 -->
					<div class="section-title">
						<h3 class="title">热点</h3>
						(
						<a href="" class="talk-square link">去话题广场</a>
						)
					</div>

					<!-- 列表 -->
					<ul class="hot-list">
						<li>
							<a href="" class="adv-tag">看展记</a>
							<div>
								<span>1.2亿次浏览</span>
							</div>
						</li>
						<li>
							<a href="">微信群社死实录
							</a>
							<div>
								<span>1244次浏览
								</span>
							</div>
						</li>
						<li>
							<a href="">卡夫卡是我的嘴替</a>
							<div>
								<span>62.2万次浏览
								</span>
							</div>
						</li>
						<li>
							<a href="">用一张不带猫的图证明你家有猫
							</a>
							<div>
								<span>2082次浏览</span>
							</div>
						</li>
						<li>
							<a href="">问题之我见
							</a>
							<div>
								<span>3.5万次浏览
								</span>
							</div>
						</li>
						<li>
							<a href="">那些你喜欢的CultFilm

							</a>
							<div>
								<span>696次浏览
								</span>
							</div>
						</li>
					</ul>
				</div>

				<!-- 主栏 -->
				<div class="main main-text">
					<div>
						<a href="">
							根据真实案件改编的悬疑小说：死去的人，真的会为了复仇而活过来吗
						</a>
					</div>
					<div class="diary">
						豆瓣阅读的日记
					</div>
					<div>
						我什么都没做，我只是睡了一觉，醒来后，五名舍友就变成了尸体。 桑文鹤的最新完结悬疑小说，《我们消失的那一年》。 内容简介 1996年，高中女生上官琪因遭受校园暴...
					</div>
					<ul>
						<li>
							<a href="">媒介蒙太奇 之 观看奥运
							</a>
						</li>
						<li>
							<a href="">两个月108公里，业余游泳爱好者路在何方
							</a>
						</li>
						<li>
							<a href="">叶芝和他的拜占庭诗篇
							</a>
						</li>
						<li>
							<a href="">一名平凡读者的买书总结</a>
						</li>
					</ul>
				</div>

			</div>

		</div>

		<!-- 豆瓣时间 -->
		<div class="section dou-time">
			<div class="container clearfix">
				<div class="aside-left">
					<h2 class="title douban-time">
						<a href="">豆瓣时间</a>
					</h2>
				</div>

				<div class="main">
					<div class="section-title douban-time">
						<h3 class="title">热门专栏</h3>
						(
						<a href="" class="talk-square link">更多</a>
						)
					</div>

					<div class="time-main">
						<ul>
							<li>
								<a href="">
									<img src="./img/douban-time/一出好戏的前世今生——赖声川的36堂编剧与创意课.jpeg" alt="">
								</a>
								<div class="words">
									<a href="">一出好戏的前世今生——赖声川的36堂编剧与创意课</a>
									<span>音频专栏</span>
								</div>
							</li>
							<li>
								<a href="">
									<img src="./img/douban-time/我们应该如何靠近诗歌——西川的诗歌课.jpeg" alt="">
								</a>
								<div class="words">
									<a href="">我们应该如何靠近诗歌——西川的诗歌课</a>
									<span>音频专栏</span>
								</div>
							</li>
							<li>
								<a href="">
									<img src="./img/douban-time/我们的女性400年——文学里的女性主义简史.png" alt="">
								</a>
								<div class="words">
									<a href="">我们的女性400年——文学里的女性主义简史</a>
									<span>音频专栏</span>
								</div>
							</li>
							<li>
								<a href="">
									<img src="./img/douban-time/构筑新东方美学——奥斯卡得主叶锦添教你用视觉讲故事.jpeg" alt="">
								</a>
								<div class="words">
									<a href="">构筑新东方美学——奥斯卡得主叶锦添教你用视觉讲故事</a>
									<span>音频专栏</span>
								</div>
							</li>
							<li>
								<a href="">
									<img src="./img/douban-time/爆诞：世界科幻200年.jpeg" alt="">
								</a>
								<div class="words">
									<a href="">爆诞：世界科幻200年</a>
									<span>音频专栏</span>
								</div>
							</li>
							<li>
								<a href="">
									<img src="./img/douban-time/用爱治愈人生——听素黑讲心灵疗愈法.jpeg" alt="">
								</a>
								<div class="words">
									<a href="">用爱治愈人生——听素黑讲心灵疗愈法</a>
									<span>音频专栏</span>
								</div>
							</li>
							<li>
								<a href="">
									<img src="./img/douban-time/看见更完整的世界——文学里的女性主义解读.jpeg" alt="">
								</a>
								<div class="words">
									<a href="">看见更完整的世界——文学里的女性主义解读</a>
									<span>音频专栏</span>
								</div>
							</li>
							<li>
								<a href="">
									<img src="./img/douban-time/爆诞：世界科幻200年.jpeg" alt="">
								</a>
								<div class="words">
									<a href="">爆诞：世界科幻200年</a>
									<span>音频专栏</span>
								</div>
							</li>
							<li>
								<a href="">
									<img src="./img/douban-time/艺术的慰藉——央美名师精讲中国艺术史.jpeg" alt="">
								</a>
								<div class="words">
									<a href="">艺术的慰藉——央美名师精讲中国艺术史</a>
									<span>音频专栏</span>
								</div>
							</li>
							<li>
								<a href="">
									<img src="./img/douban-time/迷途的苍穹——科幻世界漫游指南.jpeg" alt="">
								</a>
								<div class="words">
									<a href="">迷途的苍穹——科幻世界漫游指南</a>
									<span>音频专栏</span>
								</div>
							</li>
							<li>
								<a href="">
									<img src="./img/douban-time/邂逅风骨、风度与风流——魏晋名士的生活美学.jpeg" alt="">
								</a>
								<div class="words">
									<a href="">邂逅风骨、风度与风流——魏晋名士的生活美学</a>
									<span>音频专栏</span>
								</div>
							</li>


						</ul>
					</div>

					
				</div>
			</div>
			
		</div>

		<!-- 电影 -->
		<div class="section douban-movie">
			
			<div class="container clearfix">
				<!-- 左边栏 -->
				<div class="aside-left movie-left">
					<div class="section-title">
						<h2 class="title">电影</h2>
						<a href="">选电影</a>
						<a href="">电视剧</a>
						<a href="">排行榜</a>
						<a href="">影评</a>
						<a href="">预告片</a>
					</div>
				</div>

				<!-- 中间栏 -->
				<div class="main douban-movie">
					<div class="section-title">
						<h3 class="title">正在热映</h3>
						(
						<a href="" class="talk-square link">更多</a>
						)
					</div>

					<div class="dou-movie">
						<ul>
							<li>
								<a href="">
									<img src="./img/douban-movie/万湖会议.png" alt="">
								</a>
								<a class="movie-name" href="">万湖会议</a>
								<a href="" class="score">8.0</a>
								<a href="" class="choose-seat">选座购票</a>
							</li>

							<li>
								<a href="">
									<img src="./img/douban-movie/变形金刚：超能勇士崛起.png" alt="">
								</a>
								<a class="movie-name" href="">变形金刚：超能勇士崛起</a>
								<a href="" class="score">8.0</a>
								<a href="" ></a>
								<a href="" class="choose-seat">选座购票</a>
							</li>

							<li>
								<a href="">
									<img src="./img/douban-movie/疯狂元素城.png" alt="">
								</a>
								<a class="movie-name" href="">疯狂元素城</a>
								<a href="" class="score">8.0</a>
								<a href="" ></a>
								<a href="" class="choose-seat">选座购票</a>
							</li>

							<li>
								<a href="">
									<img src="./img/douban-movie/蜘蛛侠：纵横宇宙.png" alt="">
								</a>
								<a class="movie-name" href="">蜘蛛侠：纵横宇宙</a>
								<a href="" class="score">8.0</a>
								<a href="" ></a>
								<a href="" class="choose-seat">选座购票</a>
							</li>

							<li>
								<a href="">
									<img src="./img/douban-movie/街娃儿.png" alt="">
								</a>
								<a class="movie-name" href="">街娃儿</a>
								<a href="" class="score">8.0</a>
								<a href="" class="choose-seat">选座购票</a>
							</li>

							<li>
								<a href="">
									<img src="./img/douban-movie/进球吧！少年.png" alt="">
								</a>
								<a class="movie-name" href="">进球吧！少年</a>
								<a href="" class="score">8.0</a>
								<a href="" class="choose-seat">选座购票</a>
							</li>

							<li>
								<a href="">
									<img src="./img/douban-movie/速度与激情10.png" alt="">
								</a>
								<a class="movie-name" href="">速度与激情10</a>
								<a href="" class="score">8.0</a>
								<a href="" class="choose-seat">选座购票</a>
							</li>

							<li>
								<a href="">
									<img src="./img/douban-movie//闪电侠.png" alt="">
								</a>
								<a class="movie-name" href="">闪电侠</a>
								<a href="" class="score">8.0</a>
								<a href="" class="choose-seat">选座购票</a>
							</li>

							
						</ul>
					</div>
				</div>


				<!-- 右边栏 -->
				<div class="aside-right movie-right">
					<div class="section-title">
						<h3 class="title">近期热门</h3>
						(
						<a href="" class="talk-square link">更多</a>
						)

						<ul class="top-new">
							<li class="">
								1. <a href="">急速追杀4</a>
							</li>
							<li class="">
								2. <a href="">催眠</a>
							</li>
							<li class="">
								3. <a href="">龙马精神</a>
							</li>
							<li class="">
								4. <a href="">毒舌律师</a>
							</li>
						</ul>
					</div>
				</div>

			</div>

			
			
			
			
		</div>

		<!-- 小组 -->
		<div class="section group">
			<div class="container clearfix">
				<div class="aside-left">
					<h2>
						<a href="">小组</a>
					</h2>
					<a href="">精选</a>
					<a href="">文化</a>
					<a href="">行摄</a>
					<a href="">娱乐</a>
				</div>

				<div class="aside-right">
					<div class="section-title">
						<h3 class="title">小组分类</h3>
						(
						<a href="" class="talk-square link">更多</a>
						)

						<ul>
							<li>
								<span>兴趣>></span>
								<a href="">摄影</a>
								<a href="">影视</a>
								<a href="">音乐</a>
								<a href="">文学</a>
								<a href="">游戏</a>
							</li>

							<li>
								<span>生活>></span>
								<a href="">健康</a>
								<a href="">宠物/a>
								<a href="">美食</a>
								<a href="">美容</a>
								<a href="">化妆</a>
							</li>

							<li>
								<span>购物>></span>
								<a href="">淘宝</a>
								<a href="">二手</a>
								<a href="">文具</a>
								<a href="">团购</a>
								<a href="">品牌</a>
							</li>

							<li>
								<span>社会>></span>
								<a href="">求职</a>
								<a href="">租房</a>
								<a href="">留学</a>
								<a href="">出国</a>
								<a href="">理财</a>
							</li>
						</ul>

					</div>
				</div>

				<div class="main hot-group">
					<div class="section-title">
						<h3 class="title">近期热门</h3>
						(
						<a href="" class="talk-square link">更多</a>
						)
					</div>

					<ul>
						<li class="clearfix left">
							<a class="left" href="">
								<img src="/douban-page/img/group/三毛.webp" alt="">
							</a>

							<div class="title-group">
								<a href="">看展记</a>
								<span>8448 个成员</span>
							</div>
							
							
						</li>

						<li class="clearfix left">
							<a class="left" href="">
								<img src="/douban-page/img/group/圆梦小姐.webp" alt="">
							</a>

							<div class="title-group">
								<a href="">圆梦小姐</a>
								<span>48448 个成员</span>
							</div>
						</li>

						<li class="clearfix left">
							<a class="left" href="">
								<img src="/douban-page/img/group/我们就是要做衣服给自己穿.jpg" alt="">
							</a>

							<div class="title-group">
								<a href="">我们就是要做衣服给自己穿</a>
								<span>4844 个成员</span>
							</div>
						</li>

						<li class="clearfix left">
							<a class="left" href="">
								<img src="/douban-page/img/group/沙发客.webp" alt="">
							</a>

							<div class="title-group">
								<a href="">沙发客</a>
								<span>4848 个成员</span>
							</div>
						</li>
					</ul>
					
				</div>
			</div>
		</div>

		<!-- 读书 -->
		<div class="section read">
			<div class="container clearfix">
				<div class="aside-left">
					<h2>
						<a href="">读书</a>
					</h2>
					<a href="">分类浏览</a>
					<a href="">阅读</a>
					<a href="">作者	</a>
					<a href="">书评</a>
				</div>

				<div class="aside-right">
					<div class="section-title">
						<h3 class="title">热门标签</h3>
						(
						<a href="" class="talk-square link">更多</a>
						)
					</div>

					<ul>
						<li>
							<span>[文学]</span>
							<a href="">小说</a>
							<a href="">随笔</a>
							<a href="">小说</a>
							<a href="">随笔</a>
							<a href="">小说</a>
							<a href="">随笔</a>
							<a href="">小说</a>
							<a href="">随笔</a>
						</li>

						<li>
							<span>[文学]</span>
							<a href="">小说</a>
							<a href="">随笔</a>
							<a href="">小说</a>
							<a href="">随笔</a>
							<a href="">小说</a>
							<a href="">随笔</a>
							<a href="">小说</a>
							<a href="">随笔</a>
						</li>
						<li>
							<span>[文学]</span>
							<a href="">小说</a>
							<a href="">随笔</a>
							<a href="">小说</a>
							<a href="">随笔</a>
							<a href="">小说</a>
							<a href="">随笔</a>
							<a href="">小说</a>
							<a href="">随笔</a>
						</li>
						<li>
							<span>[文学]</span>
							<a href="">小说</a>
							<a href="">随笔</a>
							<a href="">小说</a>
							<a href="">随笔</a>
							<a href="">小说</a>
							<a href="">随笔</a>
							<a href="">小说</a>
							<a href="">随笔</a>
						</li>
						<li>
							<span>[文学]</span>
							<a href="">小说</a>
							<a href="">随笔</a>
							<a href="">小说</a>
							<a href="">随笔</a>
							<a href="">小说</a>
							<a href="">随笔</a>
							<a href="">小说</a>
							<a href="">随笔</a>
						</li>
						<li>
							<span>[文学]</span>
							<a href="">小说</a>
							<a href="">随笔</a>
							<a href="">小说</a>
							<a href="">随笔</a>
							<a href="">小说</a>
							<a href="">随笔</a>
							<a href="">小说</a>
							<a href="">随笔</a>
						</li>
					</ul>
				</div>

				<div class="main">
					<div class="section-title">
						<h3 class="title">新书速递</h3>
						(
						<a href="" class="talk-square link">更多</a>
						)
					</div>

					<ul class="clearfix">
						<li>
							<a href="">
								<img src="./img/new book/世界上最丑的女人.jpeg" alt="">
							</a>

							<div>
								<span class="author">[波兰]奥尔加·托卡尔丘克</span>
								<a href="" class="bookname">世界上最丑陋的女人</a>
								<a href="" class="free-read" >免费阅读</a>
							</div>
						</li>

						<li>
							<a href="">
								<img src="./img/new book/她的八零九零年代.jpeg" alt="">
							</a>

							<div>
								<span class="author">[波兰]奥尔加·托卡尔丘克</span>
								<a href="" class="bookname">她的八零九零年代</a>
								<a href="" class="free-read" >免费阅读</a>
							</div>
						</li>

						<li>
							<a href="">
								<img src="./img/new book/十二月十日.jpeg" alt="">
							</a>

							<div>
								<span class="author">[波兰]奥尔加·托卡尔丘克</span>
								<a href="" class="bookname">十二月十日</a>
								<a href="" class="free-read" >免费阅读</a>
							</div>
						</li>

						<li>
							<a href="">
								<img src="./img/new book/天堂主题公园.jpeg" alt="">
							</a>

							<div>
								<span class="author">[波兰]奥尔加·托卡尔丘克</span>
								<a href="" class="bookname">天堂主题公园</a>
								<a href="" class="free-read" >免费阅读</a>
							</div>
						</li>

						<li>
							<a href="">
								<img src="./img/new book/她的八零九零年代.jpeg" alt="">
							</a>

							<div>
								<span class="author">[波兰]奥尔加·托卡尔丘克</span>
								<a href="" class="bookname">她的八零九零年代</a>
								<a href="" class="free-read" >免费阅读</a>
							</div>
						</li>

						<li>
							<a href="">
								<img src="./img/new book/忍不住想打扰你.jpeg" alt="">
							</a>

							<div>
								<span class="author">[波兰]奥尔加·托卡尔丘克</span>
								<a href="" class="bookname">忍不住想打扰你</a>
								<a href="" class="free-read" >免费阅读</a>
							</div>
						</li>

						<li>
							<a href="">
								<img src="./img/new book/春缠树.jpeg" alt="">
							</a>

							<div>
								<span class="author">[波兰]奥尔加·托卡尔丘克</span>
								<a href="" class="bookname">春缠树</a>
								<a href="" class="free-read" >免费阅读</a>
							</div>
						</li>

					</ul>
				</div>
			</div>
		</div>

			<!-- 音乐 -->
		<div class="section">
			<div class="container music ">
				<div class="aside-left">
					<h2>
						<a href="">音乐</a>
					</h2>
					<a href="">音乐人</a>
					<a href="">潮潮豆瓣音乐周</a>
					<a href="">金羊毛计划</a>
					<a href="">专题</a>
				</div>

				<div class="aside-right">
					<div class="section-title">
						<h3 class="title">本周流行音乐人</h3>
						(
						<a href="" class="talk-square link">更多</a>
						)
					</div>

					<ul>
						<li>
							<span class="left">1.</span>
							<div class="img">
								<a href="">
									<img src="./img/music/pop-music/1.jpg" alt="">
								</a>
							</div>

							<div class="words">
								<a href="">Yamato Ryou</a>
								<div class="desc">
									362人关注
									<br>
									流派: 电子 Electronica
								</div>
							</div>
						</li>

						<li>
							<span class="left">2.</span>
							<div class="img">
								<a href="">
									<img src="./img/music/pop-music/2.jpg" alt="">
								</a>
							</div>

							<div class="words">
								<a href="">Yamato Ryou</a>
								<div class="desc">
									362人关注
									<br>
									流派: 电子 Electronica
								</div>
							</div>
						</li>

						<li>
							<span class="left">3.</span>
							<div class="img">
								<a href="">
									<img src="./img/music/pop-music/3.jpg" alt="">
								</a>
							</div>

							<div class="words">
								<a href="">Yamato Ryou</a>
								<div class="desc">
									362人关注
									<br>
									流派: 电子 Electronica
								</div>
							</div>
						</li>
					</ul>
				</div>

				<div class="main music-main">
					<div class="section-title">
						<h3 class="title">豆瓣新碟榜</h3>
						(
						<a href="" class="talk-square link">更多</a>
						)
					</div>

					<ul>
						<li>
							<div class="img">
								<a href="">
									<img src="./img/music/new-disc/瓦合.jpeg" alt="">
								</a>
							</div>

							<div class="words">
								<a href="">瓦和</a>
								<a href="">草东没有派对</a>
								<span>7.3</span>
							</div>
						</li>

						<li>
							<div class="img">
								<a href="">
									<img src="./img/music/new-disc/I feel.jpeg" alt="">
								</a>
							</div>

							<div class="words">
								<a href="">I feel</a>
								<a href="">草东没有派对</a>
								<span>7.3</span>
							</div>
						</li>

						<li>
							<div class="img">
								<a href="">
									<img src="./img/music/new-disc/纯白的起点.jpeg" alt="">
								</a>
							</div>

							<div class="words">
								<a href="">纯白的起点</a>
								<a href="">草东没有派对</a>
								<span>7.3</span>
							</div>
						</li>
					</ul>
					


				</div>
			</div>
		</div>

		<!-- 豆品 -->
		<div class="section">
			<div class="container doupin">
				<div class="aside-left">
					<h2>
						<a href="">豆品</a>
					</h2>
				</div>

				<div class="aside-right">
					<div class="section-title">
						<h3 class="title">热门活动</h3>
						(
						<a href="" class="talk-square link">更多</a>
						)
					</div>

					<a href="">分享你看过的电影中最触动你的台词</a>

					<div class="img">
						<a href="">
							<img src="./img/doupin/file-1683473403-0.jpg" alt="">
						</a>
					</div>

					<div class="section-title">
						<h3 class="title">官方小组</h3>
						(
						<a href="" class="talk-square link">更多</a>
						)
					</div>

					<ul>
						<li class="clearfix">
							<a href="">号外，号外，阿黑阿白表情包登录微信啦！</a>
							<span class="left">2人参与</span>
							<span class="right">04-16</span>
						</li>

						<li class="clearfix">
							<a href="">号外，号外，阿黑阿白表情包登录微信啦！</a>
							<span class="left">2人参与</span>
							<span class="right">04-16</span>
						</li>

						<li class="clearfix">
							<a href="">号外，号外，阿黑阿白表情包登录微信啦！</a>
							<span class="left">2人参与</span>
							<span class="right">04-16</span>
						</li>
					</ul>
				</div>

				<div class="main">
					<div class="section-title">
						<h3 class="title">热卖商品</h3>
						(
						<a href="" class="talk-square link">更多</a>
						)
					</div>

					<ul>
						<li class="clearfix left">
							<div class="shop-item">
								<div class="img">
									<a href="">
										<img src="./img/doupin/file-1683536915-0.jpg" alt="">
									</a>
								</div>
								<a class="left" href="">豆瓣金属中性笔</a>
								<span class="right">￥35</span>
							</div>
						</li>

						<li class="clearfix left">
							<div class="shop-item">
								<div class="img">
									<a href="">
										<img src="./img/doupin/file-1683536915-0.jpg" alt="">
									</a>
								</div>
								<a class="left" href="">豆瓣金属中性笔</a>
								<span class="right">￥35</span>
							</div>
						</li>

						<li class="clearfix left">
							<div class="shop-item">
								<div class="img">
									<a href="">
										<img src="./img/doupin/file-1683536915-0.jpg" alt="">
									</a>
								</div>
								<a class="left" href="">豆瓣金属中性笔</a>
								<span class="right">￥35</span>
							</div>
						</li>

						<li class="clearfix left">
							<div class="shop-item">
								<div class="img">
									<a href="">
										<img src="./img/doupin/file-1683536915-0.jpg" alt="">
									</a>
								</div>
								<a class="left" href="">豆瓣金属中性笔</a>
								<span class="right">￥35</span>
							</div>
						</li>
					</ul>

				</div>
			</div>
		</div>
		<!-- 同城 -->
		<div class="section city">
			<div class="container">
				<div class="aside-left">
					<h2>
						<a href="">同城</a>
					</h2>
					<a href="">近期活动</a>
					<a href="">主办方</a>
					<a href="">舞台剧</a>
				</div>

				<div class="aside-right">
					<div class="section-title">
						<h3 class="title">活动标签</h3>
					</div>

					<ul>
						<li>
							<div class="act-title">
								<a href="">音乐>></a>
							</div>
							
							<a href="">小型现场</a>
							<a href="">音乐会</a>
							<a href="">演唱会</a>
						</li>

						<li>
							<div class="act-title">
								<a href="">戏剧>></a>
							</div>
							
							<a href="">话剧</a>
							<a href="">音乐剧</a>
							<a href="">舞剧</a>
						</li>

						<li>
							<div class="act-title">
								<a href="">聚会>></a>
							</div>
							
							<a href="">生活</a>
							<a href="">集市</a>
							<a href="">演唱会</a>
						</li>

						<li>
							<div class="act-title">
								<a href="">电影>></a>
							</div>
							
							<a href="">主题放映</a>
							<a href="">影展</a>
							<a href="">影院活动</a>
						</li>
					</ul>
				</div>

				<div class="main">
					<div class="section-title">
						<h3 class="title">成都·本周热门活动</h3>
						(
						<a href="" class="talk-square link">更多</a>
						)
					</div>

					<ul>
						<li>
							<div class="img left">
								<a href="">
									<img src="./img/city/1.jpg" alt="">
								</a>
							</div>
							<div class="info">
								<div class="title">
									王欣宇x张钰「如同密友般的我们」2023联合巡演 成都站
								  </div>
								<div class="datetime">
									7月2日 周日 20:00 - 21:30
								</div>
								<address>
									NUSPACE-纽空间 奎星楼街9号
								  </address>
								<div class="follow">
									3人关注
								  </div>
							</div>
						</li>

						<li>
							<div class="img left">
								<a href="">
									<img src="./img/city/2.jpg" alt="">
								</a>
							</div>
							<div class="info">
								<div class="title">
									王欣宇x张钰「如同密友般的我们」2023联合巡演 成都站
								  </div>
								<div class="datetime">
									7月2日 周日 20:00 - 21:30
								</div>
								<address>
									NUSPACE-纽空间 奎星楼街9号
								  </address>
								<div class="follow">
									3人关注
								  </div>
							</div>
						</li>

						<li>
							<div class="img left">
								<a href="">
									<img src="./img/city/3.jpg" alt="">
								</a>
							</div>
							<div class="info">
								<div class="title">
									王欣宇x张钰「如同密友般的我们」2023联合巡演 成都站
								  </div>
								<div class="datetime">
									7月2日 周日 20:00 - 21:30
								</div>
								<address>
									NUSPACE-纽空间 奎星楼街9号
								  </address>
								<div class="follow">
									3人关注
								  </div>
							</div>

							<li>
								<div class="img left">
									<a href="">
										<img src="./img/city/4.jpg" alt="">
									</a>
								</div>
								<div class="info">
									<div class="title">
										Deep Water 水太深2023巡演「我们沟通过」成都站 成都站
									  </div>
									<div class="datetime">
										6月30日 周五 20:00 - 21:30
									</div>
									<address>
										小酒馆芳沁店-音乐现场 永..									  </address>
									<div class="follow">
										1人关注
									</div>
								</div>
							</li>
						</li>
					</ul>
				</div>
			</div>
		</div>

		<div class="section last">
			<div class="container">
				<div class="aside-left">
					<div class="company">© 2005－2023 douban.com, all rights reserved 北京豆网科技有限公司</div>
					<a href="">营业执照 </a> |
					<a href=""> 京ICP证090015号</a> |
					<a href="">京ICP备11027288号</a>|
					<a href=""> 网络视听许可证0110418号</a>|
					<a href=""> 食品经营许可证</a>|
					<br>
					<span>京网文[2021]2980-826号</span>
					<a href="">新出发京批字第直160029号</a>
					<span>（署）网出证（京）字第120号</span>
					<div>违法和不良信息/涉未成年人有害信息投诉：</div>
					<div>网络从业者不良行为举报：</div>
					<a href="">中国互联网举报电话</a>
					<span>京公网安备11010502000728</span>
				</div>

				<div class="aside-right">
					<a href="">关于豆瓣 ·</a>
					<a href="">在豆瓣工作</a>
					<a href="">联系我们</a>
					<a href="">法律声明</a>
				</div>
			</div>
			
		</div>
	</div>

	

</body>

</html>